import { Form, Input, Layout, Radio, Icon, Button } from 'antd'
import { withRouter } from 'react-router-dom'
import { useRequest } from 'ahooks'
import { requestWrapper } from '@/utils/request'
import userAPI from '@/services/user'
import React, { useState } from 'react'
import UploadImg from '@/components/UploadImg'
import './style.scss'

const Regist = props => {
    const [path, setPath] = useState(undefined)
    const { getFieldDecorator } = props.form

    const { data: registData, run: regist, loading: registLoading } = useRequest(
        values =>
            requestWrapper(userAPI.regist.bind(null, values), {
                autoSuccess: true,
                errorMessage: '用户名不能重复!'
            }),
        {
            manual: true,
            onSuccess: () => {
                console.log(registData)
                props.history.push('/login')
            }
        }
    )

    const registSubmit = e => {
        e.preventDefault()
        props.form.validateFields((err, values) => {
            if (!err) {
                values.age = parseInt(values.age)
                values.sex = parseInt(values.sex)
                values.headImg = path || 'assets/boy.jpg'
                console.log(values)
                regist(values)
            }
        })
    }

    return (
        <Layout className='regist animated fadeIn'>
            <div className='model'>
                <div className='regist-form'>
                    <span>用户注册</span>
                    <a
                        onClick={() => {
                            props.history.push('/login')
                        }}>
                        去登录
                    </a>
                    <Form onSubmit={registSubmit}>
                        <Form.Item label='头像'>
                            <UploadImg setPath={setPath} />
                        </Form.Item>
                        <Form.Item label='用户名'>
                            {getFieldDecorator('username', {
                                rules: [
                                    {
                                        required: true,
                                        message: '请输入用户名！'
                                    },
                                    { max: 20, message: '用户名不得超过20个字符' },
                                    { min: 3, message: '用户名不得少于3个字符' }
                                ]
                            })(
                                <Input
                                    prefix={<Icon type='user' style={{ color: 'rgba(0,0,0,.25)' }} />}
                                    placeholder='用户名'
                                />
                            )}
                        </Form.Item>
                        <Form.Item label='密码'>
                            {getFieldDecorator('password', {
                                rules: [
                                    {
                                        required: true,
                                        message: '请输入密码！'
                                    },
                                    {
                                        pattern: new RegExp('^[0-9a-zA-Z_]{1,}$', 'g'),
                                        message: '只允许包含数字、字母、下划线'
                                    },
                                    { min: 6, message: '密码不得少于6位' },
                                    { max: 16, message: '密码不能超过16位' }
                                ]
                            })(
                                <Input
                                    prefix={<Icon type='lock' style={{ color: 'rgba(0,0,0,.25)' }} />}
                                    type='password'
                                    placeholder='密码'
                                />
                            )}
                        </Form.Item>
                        <Form.Item label='年龄'>
                            {getFieldDecorator('age', {
                                rules: [
                                    {
                                        required: true,
                                        message: '请输入年龄'
                                    },
                                    { pattern: new RegExp(/^[1-9]\d*$/, 'g'), message: '请输入合法的年龄' }
                                ]
                            })(
                                <Input
                                    prefix={<Icon type='user' style={{ color: 'rgba(0,0,0,.25)' }} />}
                                    placeholder='年龄'
                                />
                            )}
                        </Form.Item>
                        <Form.Item label='性别'>
                            {getFieldDecorator('sex', {
                                rules: [{ required: true, message: '请选择性别' }],
                                initialValue: 1
                            })(
                                <Radio.Group>
                                    <Radio value={1}>男</Radio>
                                    <Radio value={2}>女</Radio>
                                </Radio.Group>
                            )}
                        </Form.Item>
                        <Form.Item>
                            <Button
                                className='regist-form-button'
                                type='primary'
                                htmlType='submit'
                                loading={registLoading}>
                                注册
                            </Button>
                        </Form.Item>
                    </Form>
                </div>
            </div>
        </Layout>
    )
}

export default withRouter(Form.create()(Regist))
